<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="height: 100%">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Portal</title>
		<script type="text/javascript" src="dorado/boot.js"></script>
		<script type="text/javascript">$import("portal,block-view,analog-clock,calendar");</script>
		<script type="text/javascript">
			dorado.onInit(function() {
				var changeColumnDialog = new dorado.widget.Dialog({
					width: 500,
					caption: "Change Column Setting",
					children: [
						{
							$type: "BlockView",
							id: "frameSelectView",
							blockHeight: 100, lineSize: 4, fillLine: true,
							renderer: new dorado.widget.blockview.ImageBlockRenderer({
								captionProperty: "label"
							}),
							items: [
								{ index: 1, label: "版式1", image: "images/portal/frame-1.gif" },
								{ index: 2, label: "版式2", image: "images/portal/frame-2.gif" },
								{ index: 3, label: "版式3", image: "images/portal/frame-3.gif" },
								{ index: 4, label: "版式4", image: "images/portal/frame-4.gif" }
							]
						}
					],
					buttons: [{
						caption: "OK",
						width: 75,
						onClick: function(frameSelectView, portal) {
							var data = frameSelectView.getCurrentItem();
							if (data && data.label) {
								var index = data.index, setting;
								switch (index) {
									case 1:
										setting = [
											{ name: "c1", width: "18%" },
											{ name: "c2" },
											{ name: "c3", width: "25%" }
										];
										break;
									case 2:
										setting = [
											{ name: "c1" },
											{ name: "c2", width: "30%"}
										];
										break;
									case 3:
										setting = [
											{ name: "c1", width: "30%" },
											{ name: "c2" }
										];
										break;
									case 4:
										setting = [
											{ name: "c1" },
											{ name: "c2" }
										];
										break;
								}
								portal.set("columns", setting);
								changeColumnDialog.hide();
							} else {
								dorado.MessageBox.alert("请选择一个版式!");
							}
						}
					}, {
						caption: "Cancel",
						onClick: function() {
							changeColumnDialog.hide();
						}
					}]
				});
				
				new dorado.widget.Container({
					renderTo: document.body,
					width: "100%", height: "100%",
					layout: "Dock",
					children: [
						{
							$type: "ToolBar",
							layoutConstraint: "top",
							items: [
								{ caption: "改变布局",
									onClick: function() {
										changeColumnDialog.show();
									}
								}
							]
						},
						{
							$type: "Portal",
							id: "portal",
							columns: [
								{ name: "c1", width: "18%" },
								{ name: "c2" },
								{ name: "c3", width: "25%" }
							],
							portletPadding: 10,
							portlets: [
								{
									$type: "Portlet",
									caption: "时钟",
									height: 260,
									collapseable: true,
									children: [{
										$type: "Control",
										onReady: function(self) {
											$("#devAnalogClock").appendTo(self.getDom());
										}
									}]
								},
								{
									$type: "Portlet",
									caption: "日程安排",
									height: 500,
									collapseable: true, column: 1,
									children: [{
										$type: "HtmlContainer",
										content: { tagName: "div", style: "margin: 4px" },
										height: 460,
										onReady: function(self) {
											var date = new Date();
											var d = date.getDate(), m = date.getMonth(), y = date.getFullYear();
											$(self.getContentContainer()).fullCalendar({
												theme: true,
												header: {
													left: "prev,next today",
													center: "title",
													right: "month,agendaWeek,agendaDay"
												},	
												editable: true,
												events: [
													{ title: "All Day Event", start: new Date(y, m, 1) },
													{ title: "Long Event", start: new Date(y, m, d-5), end: new Date(y, m, d-2) },
													{ id: 999, title: "Repeating Event", start: new Date(y, m, d-3, 16, 0), allDay: false },
													{ id: 999, title: "Repeating Event", start: new Date(y, m, d+4, 16, 0), allDay: false },
													{ title: "Meeting", start: new Date(y, m, d, 10, 30), allDay: false },
													{ title: "Lunch", start: new Date(y, m, d, 12, 0), end: new Date(y, m, d, 14, 0), allDay: false },
													{ title: "Birthday Party", start: new Date(y, m, d+1, 19, 0), end: new Date(y, m, d+1, 22, 30), allDay: false },
													{ title: "Click for BSDN", start: new Date(y, m, 21), end: new Date(y, m, 22), url: "http://BSDN.org" }
												]
											});
										}
									}]
								},
								{
									$type: "Portlet",
									caption: "产品简介",
									collapseable: true, column: 2,
									children: [{
										$type: "HtmlContainer",
										style: "height: 200px; margin: 8px",
										content: "Dorado7 Client Edition是从Dorado7 Standard Edition中剥离出的子项目，即Dorado7 Standard Edition的整个客户端部分。" +
											"<hr>" +
											"Dorado7 Client Edition可以看作是一套由JavaScript实现的浏览器端展现框架，" + 
											"包含了数量丰富的且易于扩展的Widget，可满足各种Web项目中增强前端表现力及提高界面开发效率的需求。" +
											"这里提到的Web项目并不仅限于基于Java技术的Web项目，也包括那些非Java的Web项目，如.Net、PHP等。"
									}]
								},
								{
									$type: "Portlet",
									caption: "地图",
									height: 300,
									collapseable: true, column: 2,
									children: [{
										$type: "HtmlContainer",
										content: "<div style=\"height:260px;\"><img src=\"images/google-map.png\"></div>"
									}]
								}
							]
						}
					]
				});
			});
		</script>
	</head>
	<body style="height:100%; margin:0; overflow:scroll">
		<div id="devAnalogClock">
			<script type="text/javascript">
				var flashvars = {
					clockSkin: "devAnalogClock-v1.1/media/skins/skin002.png",
					arrowSkin: "1",
					arrowColor: "666666"
				};
				swfobject.embedSWF(
					"devAnalogClock-v1.1/media/devAnalogClock.swf", // path to the widget
					"devAnalogClock",
					"100%", // width of the widget
					"200", // height of the widget
					"8",
					"devAnalogClock-v1.1/media/expressInstall.swf",
					flashvars,
					{scale: "noscale", wmode: "transparent"}
				);
			</script>
		</div>
	</body>
</html>
